<template>
  <div class="role">
    <query-form
      :queryFormItems="queryFormItems"
      @reset="resetQueryForm"
      @search="searchBtnClick"
    ></query-form>
    <query-table
      pageName="role"
      :tableConfig="roleListTableConfig"
      ref="queryTableRef"
      @newBtnClick="addNewUser"
      @editBtnClick="editUser"
    >
      <template #createAt="scope">{{
        formatTime(scope.row.createAt)
      }}</template>
      <template #updateAt="scope">{{
        formatTime(scope.row.updateAt)
      }}</template>
    </query-table>
    <page-dialog
      :dialogFormItems="dialogFormItems"
      :dialogFormConfig="dialogFormConfig"
      :title="title"
      :defaultInfo="defaultInfo"
      :otherInfo="authList"
      pageName="role"
      ref="dialogRef"
    >
      <el-form label-width="100px" label-position="left">
        <el-form-item label="角色权限">
          <el-tree
            ref="elTreeRef"
            :data="menuList"
            node-key="id"
            :props="{ label: 'name', children: 'children' }"
            show-checkbox
            @check="check"
          />
        </el-form-item>
      </el-form>
    </page-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, nextTick } from "vue";
import { ElTree } from "element-plus";
import { useStore } from "@/store";
import QueryForm from "@/components/query-form";
import QueryTable from "@/components/query-table";
import PageDialog from "@/components/page-dialog";
import {
  queryFormItems,
  roleListTableConfig,
  dialogFormItems,
  dialogFormConfig
} from "./config/config";
import { useSearchHook } from "@/hooks/useSearchHook";
import { useEditAndNewUser } from "@/hooks/useHandleDialog";
import { mapMenuToLeafNodeKeys } from "@/utils/mapMenu";

export default defineComponent({
  name: "role",
  components: {
    QueryForm,
    QueryTable,
    PageDialog
  },
  setup() {
    const store = useStore();
    // 查询
    const [queryTableRef, resetQueryForm, searchBtnClick] = useSearchHook();
    // 对话框
    const title = ref("新建角色");
    const addNewCb = () => {
      title.value = "新建角色";
    };
    // const defaultChecked = ref<number[]>([]);
    const elTreeRef = ref<InstanceType<typeof ElTree>>();
    const editCb = (row: any) => {
      title.value = "编辑角色";
      // defaultChecked.value = mapMenuToLeafNodeKeys(row.menuList);
      const defaultCheckKeys = mapMenuToLeafNodeKeys(row.menuList);
      // editCb函数被回调的时候，elTreeRef还没有挂载到DOM上
      nextTick(() => {
        elTreeRef.value?.setCheckedKeys(defaultCheckKeys, false);
      });
    };
    const [defaultInfo, dialogRef, addNewUser, editUser] = useEditAndNewUser(
      addNewCb,
      editCb
    );
    // 获取菜单列表
    const menuList = computed(() => store.state.menuListTreeData);
    const authList = ref({});
    const check = (data1: any, data2: any) => {
      const checkedKeys = data2.checkedKeys;
      const halfCheckedKeys = data2.halfCheckedKeys;
      const checkMenuList = [...checkedKeys, ...halfCheckedKeys];
      authList.value = { menuList: checkMenuList };
    };
    return {
      queryFormItems,
      roleListTableConfig,
      queryTableRef,
      resetQueryForm,
      searchBtnClick,
      dialogFormItems,
      title,
      defaultInfo,
      dialogRef,
      addNewUser,
      editUser,
      dialogFormConfig,
      menuList,
      check,
      authList,
      elTreeRef
    };
  }
});
</script>

<style scoped></style>
